<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="BoNiu Admin - UI Elements" />
	<meta name="author" content="tangzk@yeah.net" />
	<title>BoNiu Admin | UI Elements - Panel</title>
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/entypo.css">
	<link rel="stylesheet" href="assets/css/font.css">
	<link rel="stylesheet" href="assets/css/common.css">
	<link rel="stylesheet" href="assets/css/page_base.css">
	<script src="assets/js/libs/jquery-1.12.0.min.js"></script>
	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="page-container">
		<div class="panel panel-default">
			<div class="panel-heading">Panel heading without title</div>
			<div class="panel-body">
				Panel content
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Panel title</h3>
			</div>
			<table class="table">
				<thead>
				<tr>
					<th>#</th>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Username</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<th scope="row">1</th>
					<td>Mark</td>
					<td>Otto</td>
					<td>@mdo</td>
				</tr>
				<tr>
					<th scope="row">2</th>
					<td>Jacob</td>
					<td>Thornton</td>
					<td>@fat</td>
				</tr>
				<tr>
					<th scope="row">3</th>
					<td>Larry</td>
					<td>the Bird</td>
					<td>@twitter</td>
				</tr>
				</tbody>
			</table>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading">Panel heading</div>
			<div class="panel-body"><p>Some default panel content here. Nulla vitae elit libero, a pharetra augue.
				Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
				venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div>
			<ul class="list-group">
				<li class="list-group-item">Cras justo odio</li>
				<li class="list-group-item">Dapibus ac facilisis in</li>
				<li class="list-group-item">Morbi leo risus</li>
				<li class="list-group-item">Porta ac consectetur ac</li>
				<li class="list-group-item">Vestibulum at eros</li>
			</ul>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-primary">
					<div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
					<div class="panel-body"> Panel content</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-success">
					<div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
					<div class="panel-body"> Panel content</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-info">
					<div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
					<div class="panel-body"> Panel content</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-warning">
					<div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
					<div class="panel-body"> Panel content</div>
				</div>
			</div>
			<div class="col-md-12">
				<div class="panel panel-danger">
					<div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
					<div class="panel-body"> Panel content</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>